import React, { Component } from 'react'
import {Switch,Link,Route} from 'react-router-dom'
import Detail from './Detail'

export default class Message extends Component {

  state = {
    MessageArr:[
      {id:1,title:'消息1'},
      {id:2,title:'消息2'},
      {id:3,title:'消息3'},
    ]
  }

  render() {
    const {MessageArr} = this.state
    return (
      <div>
          {
            MessageArr.map(item=>{
              return <Link to={{pathname:'/home/message',state:{id:item.id,title:item.title}}} key={item.id}>{item.title}</Link>
            })
          }
          {/* 
            路由传参时如果使用 state 传递参数  注意这里的state 和 状态state 不是同一个
              这个的好处是在状态栏里面是看不到具体传递了什么东西的

              但是这个当用户清空缓存的时候数据就会丢 所以要做好当没有数据时的错误判断
          */}

          <Switch>
            {/* 
              细节 刚开始很容易错的地方 
                Route 组件 匹配路由的是 path 属性

              Switch 组件 是和 Route 组件匹配使用的  不是和 Link 组件匹配使用的
            */}
            <Route path={`/home/message`} component={Detail}/>
            {/* 
              /:id/:title 这种是 params 传参 也可以叫做动态传参 只要Route中这样写了 再路由组件里面就会自动的帮忙收集这个参数
                收集再 this.props.match.params 里面
            */}
          </Switch>

      </div>
    )
  }
}
